import { Button } from 'antd';
import { WeaTools, WeaSearchGroup, WeaFormItem } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import equal from 'deep-equal';
import WeaCrmTableEdit from '../comp/WeaCrmTableEdit';
import WeaCrmContractPayTable from '../comp/WeaCrmTableEdit/contractPayTable.js';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@observer
class ContractInfo extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { contentStore } = this.props;
    contentStore.componentDidMount(this);
  }

  render() {
    const { contentStore } = this.props;
    const { subTable1Info, subTable2Info, subTable3Info, subTable4Info, dialogPageType, status, canEdit } = contentStore;
    const productTable = (<WeaCrmTableEdit
      ecId={`${this && this.props && this.props.ecId || ''}_WeaCrmTableEdit@1ogfxa`}
      title={getLabel(15115, '产品')}
      ref="productTable"
      showGroup
      needAdd={(status == '0') && (dialogPageType == 'edit' ? true : (dialogPageType == 'add'))} // dialogPageType=="edit"? true:(dialogPageType=="add"? true:false)
      needCopy={false}
      columns={toJS(subTable1Info.columnDefine)}
      datas={toJS(subTable1Info.columnData)}
      onChange={this.productTableDatas.bind(this)}
      type="hasdiscount"
    />);
    const payMethodTable = (<WeaCrmTableEdit
      ecId={`${this && this.props && this.props.ecId || ''}_WeaCrmTableEdit@69cezd`}
      title={getLabel(15131, '付款方式')}
      ref="payMethodTable"
      showGroup
      needAdd={(status == '0') && (dialogPageType == 'edit' ? true : (dialogPageType == 'add'))} // dialogPageType=="edit"? true:(dialogPageType=="add"? true:false)
      needCopy={false}
      columns={toJS(subTable2Info.columnDefine)}
      datas={toJS(subTable2Info.columnData)}
      onChange={this.payTableDatas.bind(this)}
    />);
    const detailComs = [];
    detailComs.push(productTable);
    detailComs.push(payMethodTable);
    if ((status == '3' || status == '2') && subTable1Info.columnData && subTable2Info.columnData) {
      for (let i = 0; i < subTable1Info.columnData.length; i++) {
        subTable1Info.columnData[i].child = subTable3Info[subTable1Info.columnData[i].dataId];
      }
      for (let i = 0; i < subTable2Info.columnData.length; i++) {
        subTable2Info.columnData[i].child = subTable4Info[subTable2Info.columnData[i].dataId];
      }
    }

    const productChildColumns = [
      {
        title: '',
        com: [
        ],
        width: '55%',
        dataIndex: '1',
        key: '1',
      },
      {
        title: getLabel(15465, '单据号'),
        com: [
          {
            formItemType: 'INPUT',
            labelcol: 6,
            colSpan: 2,
            viewAttr: status == 2 && canEdit ? 2 : 1,
            length: 10,
            domkey: [
              'formNum',
            ],
            fieldcol: 17,
            label: getLabel(15465, '单据号'),
          },
        ],
        width: '10%',
        dataIndex: 'formNum',
        key: 'formNum',
      }, {
        title: getLabel(15145, '实际交货数量'),
        com: [
          {
            formItemType: 'INPUT',
            labelcol: 6,
            colSpan: 2,
            viewAttr: status == 2 && canEdit ? 2 : 1,
            length: 10,
            domkey: [
              'factNum',
            ],
            fieldcol: 17,
            label: getLabel(15145, '实际交货数量'),
            type: 'number',
          },
        ],
        width: '10%',
        dataIndex: 'factNum',
        key: 'factNum',
      }, {
        title: getLabel(15146, '实际交货日期'),
        com: [
          {
            formItemType: 'DATEPICKER',
            labelcol: 6,
            colSpan: 2,
            formatPattern: 2,
            viewAttr: status == 2 && canEdit ? 2 : 1,
            domkey: [
              'factDate',
            ],
            fieldcol: 17,
            label: getLabel(15146, '实际交货日期'),
          },
        ],
        width: '10%',
        dataIndex: 'factDate',
        key: 'factDate',
      }, {
        title: getLabel(104, '操作'),
        dataIndex: 'operation',
        com: [<span />],
        key: 'operation',
        width: '15%',
      },
    ];
    const payChildColumns = [
      {
        title: '',
        com: [
        ],
        width: '55%',
        dataIndex: '1',
        key: '1',
      },
      {
        title: getLabel(15465, '单据号'),
        com: [
          {
            formItemType: 'INPUT',
            labelcol: 6,
            colSpan: 2,
            viewAttr: status == 2 && canEdit ? 2 : 1,
            length: 10,
            domkey: [
              'formNum',
            ],
            fieldcol: 17,
            label: getLabel(15465, '单据号'),
          },
        ],
        width: '10%',
        dataIndex: 'formNum',
        key: 'formNum',
      }, {
        title: getLabel(16949, '实际付款金额'),
        com: [
          {
            formItemType: 'INPUT',
            labelcol: 6,
            colSpan: 2,
            viewAttr: status == 2 && canEdit ? 2 : 1,
            length: 10,
            domkey: [
              'factPrice',
            ],
            fieldcol: 17,
            label: getLabel(16949, '实际付款金额'),
            type: 'number',
          },
        ],
        width: '10%',
        dataIndex: 'factPrice',
        key: 'factPrice',
      }, {
        title: getLabel(15150, '实际付款日期'),
        com: [
          {
            formItemType: 'DATEPICKER',
            labelcol: 6,
            colSpan: 2,
            formatPattern: 2,
            viewAttr: status == 2 && canEdit ? 2 : 1,
            domkey: [
              'factDate',
            ],
            fieldcol: 17,
            label: getLabel(15150, '实际付款日期'),
          },
        ],
        width: '10%',
        dataIndex: 'factDate',
        key: 'factDate',
      }, {
        title: getLabel(104, '操作'),
        dataIndex: 'operation',
        com: [<span />],
        key: 'operation',
        width: '15%',
			  },

    ];

    return (
      <div >
        <div>
          {this.getContractForm()}
        </div>
        {
          (status == '3' || status == '2') && subTable1Info.columnDefine && subTable2Info.columnDefine ?
            <div>
              <WeaCrmContractPayTable
                ecId={`${this && this.props && this.props.ecId || ''}_WeaCrmContractPayTable@7nl65z`}
                title={getLabel(15115, '产品')}
                showGroup
                columns={toJS(subTable1Info.columnDefine)}
                datas={toJS(subTable1Info.columnData)}
                childColumns={productChildColumns}
                type={'product'}
                payRowSave={this.productRowsave.bind(this)}
                payDetailHandle={this.productDetailHandle.bind(this)}
                canEdit={status == 2 ? canEdit : false}
                //  onChange={this.editChange.bind(this)}
              />
              <WeaCrmContractPayTable
                ecId={`${this && this.props && this.props.ecId || ''}_WeaCrmContractPayTable@ztkwc3`}
                title={getLabel(15131, '付款方式')}
                showGroup
                columns={toJS(subTable2Info.columnDefine)}
                datas={toJS(subTable2Info.columnData)}
                childColumns={payChildColumns}
                type={'pay'}
                payRowSave={this.payRowsave.bind(this)}
                payDetailHandle={this.payDetailHandle.bind(this)}
                canEdit={status == 2 ? canEdit : false}
              />
            </div>
            : detailComs
        }
      </div>
    );
  }
  getContractForm() {
    const { contentStore } = this.props;
    const { infoForm, mainTableInfo } = contentStore;
    const { isFormInit } = infoForm;
    const group = [];
    isFormInit && toJS(mainTableInfo).map((c,indexGroup) => {
      const items = [];
      c.items.map((fields, index) => {
        let isunderline = '';
        if (fields.viewAttr == '1' || (fields.conditionType == 'BROWSER' && fields.browserConditionParam.viewAttr == '1')) { fields.hasBorder = false; isunderline = 'underline'; } // 只读样式控制
        items.push({
          com: (<WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8zqjq0@${index}`}
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            error={infoForm.getError(fields)}
            tipPosition="bottom"
            wrapperCol={{ span: `${fields.fieldcol}` }}
            underline={isunderline}
          >
            <div style={{ display: 'table-cell', verticalAlign: 'bottom' }}><WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@o4ybae@${index}`} fieldConfig={fields} form={infoForm} /></div>
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@l03yev@${indexGroup}`} needTigger title={c.title} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }
  productTableDatas(datas) {
    const { saveContractProduct } = this.props.contentStore;
    saveContractProduct(datas);
  }
  payTableDatas(datas) {
    const { saveContractPay } = this.props.contentStore;
    saveContractPay(datas);
  }
  productRowsave(record, index) {
    const { productSave, contractId } = this.props.contentStore;
    productSave({ contractId, productList: JSON.stringify([{ dataId: record.dataId, formNum: record.formNum, factNum: record.factNum, factDate: record.factDate, isFinish: record.isFinish, isRemind: record.isRemind }]) });
  }
  productDetailHandle(record, index, type) {
    const { payGoodsSave, payGoodsDelete, contractId } = this.props.contentStore;
    if (type == 'save') {
      payGoodsSave({ contractId, payGoodsList: JSON.stringify([{ ...record }]) });
    }
    if (type == 'delet') {
      payGoodsDelete({ contractId, dataId: record.dataId, productId: record.productId });
    }
  }
  payRowsave(record, index) {
    const { payMethodSave, contractId } = this.props.contentStore;
    payMethodSave({ contractId,
      payMehodList: JSON.stringify([{ dataId: record.dataId, formNum: record.formNum, factPrice: record.factPrice, factDate: record.factDate, isFinish: record.isFinish, isRemind: record.isRemind }]) });
  }
  payDetailHandle(record, index, type) {
    const { paySave, payDelete, contractId } = this.props.contentStore;
    if (type == 'save') {
      paySave({ contractId, payList: JSON.stringify([{ ...record }]) });
    }
    if (type == 'delet') {
      payDelete({ contractId, dataId: record.dataId, paymethodId: record.paymethodId });
    }
  }
}

export default ContractInfo;
